<template>
  <div class="pop-up">
    <div class="approved-logging-container">
      <div class="title">
        <span>审核记录</span>
        <i class="el-icon-close" @click="closePopUp" />
      </div>
      <div class="table-container">
        <div class="order-number">
          预选单号：<span>20191029144030932-3333 </span>
        </div>
        <div class="table-content">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="status" label="审批状态" width="100" />
            <el-table-column prop="man" label="审核人" width="140" />
            <el-table-column prop="opinion" label="审批意见" />
            <el-table-column prop="date" label="审批时间" width="190" />
            <el-table-column prop="operation" label="操作" width="100">
              <template slot-scope="scope">
                <div class="check-order" @click="toCheck">查看清单</div>
                <!-- <div class="check-order" @click="$router.push('/check-budget-orders?id='+scope.row.id)">查看清单</div> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="form-container">
        <el-form ref="form" :model="form" label-width="130px" :lable-position="lablePosition">
          <el-form-item label="选择审批状态：">
            <el-radio-group v-model="form.resource">
              <el-radio label="同意" />
              <el-radio label="不同意" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="输入审批意见：">
            <el-input v-model="form.desc" type="textarea" maxlength="200" />
            <span class="num">0/200</span>
          </el-form-item>
          <el-form-item>
            <div class="concel-btn" @click="closePopUp">取消</div>
            <div class="confirm-approve" @click="onSubmit">确定审批</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array
    }
  },
  data() {
    return {
      form: {
        resource: '',
        desc: ''
      },
      lablePosition: 'left'
    }
  },
  methods: {
    closePopUp() {
      this.$emit('closePopUp')
    },
    toCheck() {
      // 带参跳转到详情页
      document.body.style.overflow = 'auto'
      this.$router.push('/check-budget-orders')
    },
    onSubmit() {
      console.log(this.form)
      this.$emit('onSubmit')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-table--enable-row-transition .el-table__body td {
  text-align: center;
  color: #6b6b6bff;
  font-size: 12px;
}
::v-deep .el-table th.is-leaf {
  text-align: center !important;
  background-color: #f5f5f5 !important;
  font-weight: normal;
  color: #6b6b6bff;
}
::v-deep .el-form-item__label{
text-align: left!important;

padding-left: 15px!important;
}
::v-deep .el-form-item{
margin-bottom: 35px;
}
::v-deep .el-form-item:nth-child(3){
  margin: 20px 0 35px 0;
  height: 37px;
}
::v-deep .el-radio-group{
display: flex;
}
::v-deep .el-radio__inner {
    border: 5px solid #A7A7AAFF;
}
::v-deep .el-radio__input.is-checked .el-radio__inner{
    border-color: #ff3b30;
    background: #fff;
}
::v-deep .el-form-item__content{
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 30px;
width: 500px!important;
}
.el-textarea{
  width: 418px;
  height: 63px;
  ::v-deep .el-textarea__inner{
     width: 418px!important;
  height: 63px;
  }
}

.confirm-approve{
width: 110px!important;
height: 37px;
background-color: #FF3B30FF;
border-radius: 4px;
text-align: center;
line-height: 37px;
color: #fff;
}
.concel-btn{
width: 110px!important;
height: 37px;
text-align: center;
line-height: 37px;
background-color: #f5f5f5;
border: 1px solid #E5E5E5FF;
margin-right: 16px;
border-radius: 4px;
}
.concel-btn:hover{
  cursor: pointer;
}
.confirm-approve:hover{
   cursor: pointer;
}
.pop-up {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .approved-logging-container {
    width: 720px!important;
    font-size: 16px;
    background-color: #fff;
    .title {
      padding: 0 15px;
      height: 42px;
      background-color: #f5f5f5ff;
      border-bottom: 1px solid #e5e5e5ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-icon-close:hover {
        cursor: pointer;
      }
    }
    .table-container {
      background-color: #fff;
      padding: 0 15px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      .order-number {
        padding-top: 57px;
        padding-bottom: 27px;
      }
      .table-content {
        // margin-bottom: 94px;
        border: 1px solid #e5e5e5ff;
        border-bottom: none;
        font-size: 12px;
        .check-order {
          color: #02a9f1ff;
        }
        .check-order:hover {
          cursor: pointer;
        }
      }
    }
    .form-container{
  background-color: #fff;
  // height: 230px;
   .num {
      font-size: 12px;
      color: #6b6b6b;
      position: absolute;
      bottom: -27px;
    right: 30px;
    }
    }
  }
}
</style>
